<template>
<div id="div1">
  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
    <el-row :gutter="400">
      <el-col :span="8">
        <el-form-item label="所属公寓" prop="apartment">
          <el-input v-model="form.apartment" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="楼" prop="building">
          <el-input v-model="form.building" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="400">
      <el-col :span="8">
        <el-form-item label="层" prop="floor">
          <el-input v-model="form.floor" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="类型" prop="type">
          <el-input v-model="form.type" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="400">
      <el-col :span="8">
        <el-form-item label="面积" prop="area">
          <el-input v-model="form.area" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="租金" prop="rent">
          <el-input v-model="form.rent" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="400">
      <el-col :span="8">
        <el-form-item label="租金方案" prop="rentPlan">
          <el-input v-model="form.rentPlan" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="公寓地址" prop="apartmentAddress">
          <el-input v-model="form.apartmentAddress" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="400">
      <el-col :span="8">
        <el-form-item label="公寓电话" prop="apartmentPhone">
          <el-input v-model="form.apartmentPhone" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="房屋管理员" prop="houseManager">
          <el-input v-model="form.houseManager" class="input-class" size="small"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="400">
      <el-col :span="8">
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="form.contactPhone" class="input-class"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="400">
      <el-col :span="23">
    <el-form-item label="介绍" prop="description">
      <el-input type="textarea" v-model="form.description"></el-input>
    </el-form-item>
    </el-col>
    </el-row>
    <el-form-item label="照片" prop="photo">
      <el-upload
        action="#"
        list-type="text"
        :on-change="handleFileChange"
        :before-upload="beforeUpload">
        <el-button slot="trigger" type="primary">选择文件</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <div class="button-container">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
      <el-button type="info" @click="closeForm">关闭</el-button>
    </div>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElMessage, ElForm, ElFormItem, ElInput, ElButton, ElUpload,ElRow, ElCol } from 'element-plus';
export default {
  setup() {
    const formRef = ref(null);

    const form = reactive({
      apartment: '',
      building: '',
      floor: '',
      type: '',
      area: '',
      rent: '',
      rentPlan: '',
      apartmentAddress: '',
      apartmentPhone: '',
      houseManager: '',
      contactPhone: '',
      description: '',
      photo: null, // 照片文件
    });

    const rules = reactive({
      apartment: [
        { required: true, message: '请输入所属公寓', trigger: 'blur' },
      ],
      building: [
        { required: true, message: '请输入楼号', trigger: 'blur' },
      ],
      floor: [
        { required: true, message: '层不能为空', trigger: 'blur' },
      ],
      type: [
        { required: true, message: '类型不能为空', trigger: 'blur' },
      ],
      area: [
        { required: true, message: '面积不能为空', trigger: 'blur' },
        { type: 'number', message: '面积必须为数字' }
      ],
      rent: [
        { required: true, message: '租金不能为空', trigger: 'blur' },
        { type: 'number', message: '租金必须为数字' }
      ],
      rentPlan: [
        { required: true, message: '租金方案不能为空', trigger: 'blur' }
      ],
      apartmentAddress: [
        { required: true, message: '公寓地址不能为空', trigger: 'blur' }
      ],
      apartmentPhone: [
        { required: true, message: '公寓电话不能为空', trigger: 'blur' },
      ],
      houseManager: [
        { required: true, message: '房屋管理员不能为空', trigger: 'blur' }
      ],
      contactPhone: [
        { required: true, message: '联系电话不能为空', trigger: 'blur' },
      ],
      description: [
        { required: true, message: '请输入介绍', trigger: 'blur' },
      ],
      //photo: [
       // { required: true, message: '请上传照片', trigger: 'change' },
      //],
    });

    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
          console.log('Form submit!', form);
          ElMessage.success('表单提交成功！');
        } else {
          // 表单验证失败
          ElMessage.error('表单验证失败，请检查输入！');
          return false;
        }
      });
    };

    const resetForm = () => {
      formRef.value.resetFields();
    };

    const closeForm = () => {
      // 执行关闭表单的逻辑
      ElMessage.info('表单已关闭');
    };

    const handleFileChange = (file, fileList) => {
      form.photo = file; // 更新照片文件
    };

    const beforeUpload = (file) => {
      // 可以在这里添加文件上传前的验证逻辑
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        ElMessage.error('只能上传图片文件！');
      }
      return isImage;
    };

    return {
      form,
      rules,
      submitForm,
      resetForm,
      closeForm,
      handleFileChange,
      beforeUpload,
      formRef,
    };
  },
};
</script>

<style scoped>
.input-class {
  width: 300px; /* 你想要的宽度 */
  height: 20px; /* 你想要的高度 */
  padding: 5px /*padding: 5px; 内边距 */
}
#div1{
    margin-left: 200px;
    background-color:white;
    width: 900px;
    height: 600px;
}
.button-container {
  display: flex;
  justify-content: center;
  padding: 20px; /* 添加一些内边距 */
  padding-right: 13%; 
}
</style>